<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过度动画</title>
    <link rel="stylesheet" href="/css/reset.css"> <!-- 清除浏览器默认样式 -->
    <link rel="stylesheet" href="/css/public.css">
    <style>

        .box{
            width: 1000px;
            background-color: rgb(177, 177, 177, .5);
            margin: auto;
            position: relative;
        }
    
        .box1{
            height: 50px;
            width: 50px; 
            left: 0;
            top: 0;
            background-color: yellow;
            position: absolute;

            /* 
            transition: property   duration    timing-function     delay;
                       
                        property: 过度效果
                                    all 默认：宽高
                                    property css属性：width|height
                                    none 没有过度效果
                        duration: 执行动画时间 1s(秒)
                        timing-function: 过度速度
                                    ease: 默认。动画以低速开始，然后加快，在结束前变慢。
                                    linear: 动画从头到尾的速度是相同的。
                                    ease-in: 动画以低速开始。
                                    ease-out: 动画以低速结束。
                                    ease-in-out: 动画以低速开始和结束。
                                    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
                        delay: 过度延迟时间
                                    
           */
            transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0s; 
            /*transition: all 1s steps(3) 0s;  steps分段过度 */ 
        }

        .box:hover .box1{
            width: 100px;
            height: 100px;
            top: 225px;
            left: 900px;
            background-color: red;
        }

        /* ------------------------------------动画------------------------------------ */
        .box2{
            height: 50px;
            width: 50px; 
            background-color: rgb(16, 203, 7);
            position: absolute;
            margin-top: 200px;
            /* 
                        
            animation: name duration timing-function delay iteration-count direction fill-mode play-state; 
                       name: @keyframes名称
                       duration: 执行动画时间
                       timing-function: 动画的速度曲线
                                    ease: 默认。动画以低速开始，然后加快，在结束前变慢。
                                    linear: 动画从头到尾的速度是相同的。
                                    ease-in: 动画以低速开始。
                                    ease-out: 动画以低速结束。
                                    ease-in-out: 动画以低速开始和结束。
                                    cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
                       delay: 延迟时间
                       iteration-count: 执行次数
                                    n: 播放次数的数值、如：iteration-count: 20
                                    infinite: 无限执行 
                       direction: 属性定义是否应该轮流反向播放动画
                                normal: 正常、默认值
                                alternate: 轮流反向播放
                       fill-mode: 属性规定动画在播放之前或之后，其动画效果是否可见
                                none: 不改变默认行为。
                                forwards: 动画执行完毕后元素会停止在动画结束位置
                                backwards: 动画延迟等待时、元素就会处于开始位置
                                both: 向前和向后填充模式都被应用
                       play-state: 是否暂停
                                running: 运行、默认
                                paused: 暂停
            */
            animation: test 3s ease 0s infinite alternate none running;
        }

        .box:hover .box2{ /* 控制动画暂停 */
            animation-play-state: paused; 
            /*  running: 运行、默认
                paused: 暂停
            */
        }

        @keyframes test{
            form{ /* from表示动画的开始位置,也可以使用 0% */
                background-color: aliceblue;
                margin-left: 0;
            }

            to{/* to动画表示结束位置,也可以使用100% */
                background-color: red;
                margin-left: 950px;
            }
        }
        /* ------------------------------------跑步动画------------------------------------ */
        .paobu{
            position: relative;
            width: 184px;
            height: 325px;
            left: 0;
            background-image: url(/helloworld_html5/imgs/zoulu.webp);
            animation: run .5s steps(8) 0s infinite normal none running;
        }
        @keyframes run{
            from{
                background-position: 0 0;
            }
            to{
                background-position: -1472px 0;
            }
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="paobu"></div>
    </div>

    

    
</body>
</html>